import * as React from "react";
import { Button, ConfigProvider, Space } from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import { FloatButton } from "antd";
import { CommentOutlined, CustomerServiceOutlined } from "@ant-design/icons";
import { Divider } from "antd";
import { Col, Row } from "antd";

export default class AntBtn extends React.Component {
  render() {
    return (
      <div>
        <ConfigProvider
          theme={{
            token: {
              // Seed Token，影响范围大
              colorPrimary: "#b97db8",
              borderRadius: 2,

              // 派生变量，影响范围小
              colorBgContainer: "#31ff9d",
            },
          }}
        >
          <Space>
            <Button type="primary">Primary Button</Button>
            <Button>Default Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
          </Space>
          <Space direction="vertical">
            <Space>
              <Button type="primary">Primary</Button>
              <Button type="primary" disabled>
                Primary(disabled)
              </Button>
            </Space>
            <Space>
              <Button>Default</Button>
              <Button disabled>Default(disabled)</Button>
            </Space>
            <Space>
              <Button type="dashed">Dashed</Button>
              <Button type="dashed" disabled>
                Dashed(disabled)
              </Button>
            </Space>
            <Space>
              <Button type="text">Text</Button>
              <Button type="text" disabled>
                Text(disabled)
              </Button>
            </Space>
            <Space>
              <Button type="link">Link</Button>
              <Button type="link" disabled>
                Link(disabled)
              </Button>
            </Space>
            <Space>
              <Button type="primary" href="https://ant.design/index-cn">
                Href Primary
              </Button>
              <Button
                type="primary"
                href="https://ant.design/index-cn"
                disabled
              >
                Href Primary(disabled)
              </Button>
            </Space>
            <Space>
              <Button danger>Danger Default</Button>
              <Button danger disabled>
                Danger Default(disabled)
              </Button>
            </Space>
            <Space>
              <Button danger type="text">
                Danger Text
              </Button>
              <Button danger type="text" disabled>
                Danger Text(disabled)
              </Button>
            </Space>
            <Space>
              <Button type="link" danger>
                Danger Link
              </Button>
              <Button type="link" danger disabled>
                Danger Link(disabled)
              </Button>
            </Space>
            <Space className="site-button-ghost-wrapper">
              <Button ghost>Ghost</Button>
              <Button ghost disabled>
                Ghost(disabled)
              </Button>
            </Space>
          </Space>
        </ConfigProvider>
        <Space wrap>
          <Button type="primary" danger>
            Primary
          </Button>
          <Button danger>Default</Button>
          <Button type="dashed" danger>
            Dashed
          </Button>
          <Button type="text" danger>
            Text
          </Button>
          <Button type="link" danger>
            Link
          </Button>
        </Space>
        <Space wrap>
          <Button type="primary" icon={<DownloadOutlined />} size="large" />
          <Button
            type="primary"
            shape="circle"
            icon={<DownloadOutlined />}
            size="large"
          />
          <Button
            type="primary"
            shape="round"
            icon={<DownloadOutlined />}
            size="large"
          />
          <Button
            type="primary"
            shape="round"
            icon={<DownloadOutlined />}
            size="large"
          >
            Download
          </Button>
          <Button type="primary" icon={<DownloadOutlined />} size="large">
            Download
          </Button>
        </Space>
        <FloatButton onClick={() => console.log("click")} />
        <FloatButton.Group
          trigger="click"
          type="primary"
          style={{ right: 24 }}
          icon={<CustomerServiceOutlined />}
        >
          <FloatButton />
          <FloatButton icon={<CommentOutlined />} />
        </FloatButton.Group>
        <FloatButton.Group
          trigger="hover"
          type="primary"
          style={{ right: 94 }}
          icon={<CustomerServiceOutlined />}
        >
          <FloatButton />
          <FloatButton icon={<CommentOutlined />} />
        </FloatButton.Group>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
          merninisti licere mihi ista probare, quae sunt a te dicta? Refert
          tamen, quo modo.
        </p>
        <Divider />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
          merninisti licere mihi ista probare, quae sunt a te dicta? Refert
          tamen, quo modo.
        </p>
        <Divider dashed />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
          merninisti licere mihi ista probare, quae sunt a te dicta? Refert
          tamen, quo modo.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
          merninisti licere mihi ista probare, quae sunt a te dicta? Refert
          tamen, quo modo.
        </p>{" "}
        <Divider orientation="left">文本左边</Divider>
        <Row>
          <Col span={24}>col</Col>
        </Row>
        <Row>
          <Col span={12}>col-12</Col>
          <Col span={12}>col-12</Col>
        </Row>
        <Row>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
        </Row>
        <Row>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
        </Row>
      </div>
    );
  }
}
